
import { useState } from 'react'
import { Button, Input, Form, Popup, Switch, NavBar, Toast, } from 'react-vant'
import { Area } from 'react-vant'
import { areaList } from '@vant/area-data'
import {useNavigate} from 'react-router-dom'
import '../sass/Address.scss'
import axios from 'axios'

function Address() {

    const [form] = Form.useForm()
    const [visible, setVisible] = useState(false)

    let navigate = useNavigate()

    const onFinish = values => {
        console.log(values)
        let areaData = values.area.split('/')
        let data = {
            name:values.name,
            tel:values.tel,
            province:areaData[0],
            city:areaData[1],
            county:areaData[1],
            addressDetail:values.addressDetail,
            areaCode:'',
            postalCode:values.postalCode,
            isDefault:Number(values.isDefault==undefined?false:values.isDefault)
        }
        // console.log(data);
        axios({
            method:'post',
            url:'/addAddress',
            data
        }).then(res => {
            // console.log(res);
            if (res.data.code == 700) {
                return navigate('/login')
            }
            Toast({
                message:res.data.msg
            })
            navigate(-1)
        })
    }
    let selectArea = (value,option) => {
        if (option.length<3) {
            Toast({
                message:'请完善信息'
            })
            return
        }
        let area = []
        option.forEach(item => {
            area.push(item.text)
        })
        form.setFieldValue('area',area.join('/'))
        setVisible(false)
    }

    return (
        <div className="address-page">
            <NavBar
                title="新增地址"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block>
                            保存
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ required: true, message: '请填写姓名' }]}
                    name='name'
                    label='姓名'
                >
                    <Input placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    rules={[{ pattern: /^1[3-9]\d{9}$/, required: true, message: '请填写手机号' }]}
                    name='tel'
                    label='手机号'
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item
                    isLink
                    rules={[{ required: true, message: '请填写地区' }]}
                    name='area'
                    label='地区'
                    onClick={() => setVisible(true)}
                >
                    <Input readOnly placeholder='请输入地区' />
                </Form.Item>
                <Form.Item
                    name='addressDetail'
                    label='详细地址'
                    rules={[{ required: true, message: '请填写详细地址' }]}
                >
                    <Input placeholder='请输入详细地址' />
                </Form.Item>
                <Form.Item
                    name='postalCode'
                    label='邮政编码'
                    rules={[{ pattern: /^\d{6}$/, message: '邮政编码格式错误' }]}
                >
                    <Input placeholder='请输入邮政编码' />
                </Form.Item>
                <Form.Item
                    name='isDefault'
                    label='设为默认收获地址'
                    labelWidth='3rem'
                    valuePropName='checked'
                    controlAlign='right'
                >
                    <Switch size='20'></Switch>
                </Form.Item>
            </Form>
            <Popup visible={visible} onClose={() => setVisible(false)}
                style={{ height: '60%' }}
                position='bottom' round>
                <div style={{ padding: '10px' }}>
                    <Area title='标题' areaList={areaList} onConfirm={(value,option) => {selectArea(value,option)}} onCancel={() => setVisible(false)} />
                </div>
            </Popup>
        </div>

    )
}
export default Address